<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分组字典接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .api-section {
            margin-bottom: 30px;
        }
        .api-url {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .response {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            max-height: 400px;
            overflow-y: auto;
        }
        .btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background: #0056b3;
        }
        .btn-success {
            background: #28a745;
        }
        .btn-success:hover {
            background: #1e7e34;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .dict-group {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
            padding: 15px;
        }
        .dict-group h3 {
            margin: 0 0 10px 0;
            color: #007bff;
        }
        .dict-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .dict-item {
            background: #f8f9fa;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }
        .dict-item .value {
            font-weight: bold;
            color: #007bff;
        }
        .dict-item .name {
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>分组字典接口测试页面</h1>
        <p>此页面用于测试新的分组字典API接口功能</p>
        
        <div class="api-section">
            <h2>1. 获取所有分组字典集合</h2>
            <div class="api-url">
                GET http://localhost:9002/system/sysDict/getAllDictGrouped
            </div>
            <button class="btn" onclick="testGroupedDict()">测试分组字典接口</button>
            <div id="grouped-status" class="status" style="display: none;"></div>
            <div id="grouped-response" class="response" style="display: none;"></div>
        </div>

        <div class="api-section">
            <h2>2. 获取所有字典集合（对比）</h2>
            <div class="api-url">
                GET http://localhost:9002/system/sysDict/getAllDict
            </div>
            <button class="btn" onclick="testAllDict()">测试所有字典接口</button>
            <div id="all-status" class="status" style="display: none;"></div>
            <div id="all-response" class="response" style="display: none;"></div>
        </div>

        <div class="api-section">
            <h2>3. 分组字典展示</h2>
            <button class="btn btn-success" onclick="displayGroupedData()">展示分组数据</button>
            <div id="grouped-display"></div>
        </div>
    </div>

    <script>
        let groupedData = null;
        let allDictData = null;

        async function testGroupedDict() {
            const statusDiv = document.getElementById('grouped-status');
            const responseDiv = document.getElementById('grouped-response');
            
            statusDiv.style.display = 'block';
            statusDiv.className = 'status';
            statusDiv.textContent = '正在请求分组字典接口...';
            
            try {
                const response = await fetch('http://localhost:9002/system/sysDict/getAllDictGrouped');
                const data = await response.json();
                
                if (response.ok) {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '分组字典接口请求成功！';
                    groupedData = data.data;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `请求失败: ${data.msg || '未知错误'}`;
                }
                
                responseDiv.style.display = 'block';
                responseDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = `请求失败: ${error.message}`;
                responseDiv.style.display = 'block';
                responseDiv.textContent = error.toString();
            }
        }

        async function testAllDict() {
            const statusDiv = document.getElementById('all-status');
            const responseDiv = document.getElementById('all-response');
            
            statusDiv.style.display = 'block';
            statusDiv.className = 'status';
            statusDiv.textContent = '正在请求所有字典接口...';
            
            try {
                const response = await fetch('http://localhost:9002/system/sysDict/getAllDict');
                const data = await response.json();
                
                if (response.ok) {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '所有字典接口请求成功！';
                    allDictData = data.data;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `请求失败: ${data.msg || '未知错误'}`;
                }
                
                responseDiv.style.display = 'block';
                responseDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = `请求失败: ${error.message}`;
                responseDiv.style.display = 'block';
                responseDiv.textContent = error.toString();
            }
        }

        function displayGroupedData() {
            const displayDiv = document.getElementById('grouped-display');
            
            if (!groupedData) {
                displayDiv.innerHTML = '<div class="status error">请先获取分组字典数据</div>';
                return;
            }

            let html = '<h3>分组字典数据展示</h3>';
            
            groupedData.forEach(group => {
                html += `
                    <div class="dict-group">
                        <h3>${group.dictName} (${group.dictCode})</h3>
                        <p>包含 ${group.items ? group.items.length : 0} 个字典项</p>
                        <div class="dict-items">
                `;
                
                if (group.items && group.items.length > 0) {
                    group.items.forEach(item => {
                        html += `
                            <div class="dict-item">
                                <div class="value">${item.value}</div>
                                <div class="name">${item.name}</div>
                            </div>
                        `;
                    });
                } else {
                    html += '<div class="dict-item">暂无数据</div>';
                }
                
                html += '</div></div>';
            });
            
            displayDiv.innerHTML = html;
        }

        // 页面加载时自动测试分组字典接口
        window.onload = function() {
            console.log('页面加载完成，可以开始测试接口');
        };
    </script>
</body>
</html>
